<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <el-form-item label="患者名字">
            <el-input v-model="formInline.name" placeholder="请输入患者名字" />
          </el-form-item>

          <el-form-item label="手机号码">
            <el-input
              v-model="formInline.iphone"
              placeholder="请输入手机号码"
            />
          </el-form-item>

          <el-form-item label="身份证号">
            <el-input v-model="formInline.id" placeholder="请输入身份证号" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onReset">重置</el-button>
          </el-form-item>
        </div>
      </template>
      <el-table
        :data="tableData"
        border
        show-summary
        style="width: 100%"
        @current-change="handleDblClick"
      >
        <el-table-column prop="id" label="挂号ID" width="180" />
        <el-table-column prop="name" label="患者名称" />
        <el-table-column prop="amount1" sortable label="挂号科室" />
        <el-table-column prop="amount2" sortable label="就诊医生" />
        <el-table-column prop="amount3" sortable label="挂号费用" />
        <el-table-column prop="time" sortable label="挂号时间" />
        <el-table-column prop="state" sortable label="挂号状态" />

        <el-table-column label="操作">
          <template slot-scope="scope"></template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { S } from "vite-plugin-mock-dev-server/dist/types-D50kW_6z";
import { ref } from "vue";

const onSubmit = () => {
  console.log("submit");
};

const onReset = () => {
  formInline.value = {
    id: "",
    name: "",
    iphone: "",
  };
};

//查出来的患者数据
interface Product {
  id: number;
  name: string;
  iphone: string;
  sfz: string;
  time: string;
  age: number;
  sex: string;
  xxzt: string;
  new_time: string;
}

const tableData: Product[] = [
  {
    id: 1,
    name: "张三",
    iphone: "13812345678",
    sfz: "123456789012345678",
    time: "2022-01-01 10:00:00",
    age: 25,
    sex: "男",
    xxzt: "门诊",
    new_time: "2022-01-01 10:00:00",
  },
];

const checkCurrentChange = (row: Product) => {
  console.log(row);
};

const handleDblClick = (row: Product) => {
  console.log("双击事件触发:", row);
  // 在这里添加您需要的逻辑
};

const formInline = ref({
  id: "",
  name: "",
  iphone: "",
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>
